<template>
  <router-link :to="'/CourseDetail/'+props.course.corId">
  <el-card class="course-card">
    <img :src="props.course.imgUrl" class="course-image" alt="Course Image">
    <div class="course-name">{{ props.course.corName }}</div>
    <div slot="extra" class="course-extra">简介：{{ props.course.intro }}</div>
    <div>上课时间: {{ props.course.startTime }}</div>
    <div>下课时间: {{ props.course.endTime }}</div>
  </el-card>
  </router-link>
</template>

<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
// 使用 defineProps 定义 props
const props = defineProps({
  course: {
    type: Object,
    required: true,
  },
});

</script>

<style>
</style>
<style scoped>

.course-card {
  /* 宽度和高度应该根据你的布局需求来设置 */
  width: 200px; /* 示例值，你可能需要调整 */
  height: 250px; /* 让卡片高度根据内容自动调整 */
  border-radius: 20px;
  margin: 10px;
}
.course-card:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.course-image {
  width: 100%;
  height: 100px;
  border-radius: 10%;
}
.course-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-extra {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>